<template>
    <el-collapse v-model="activeNames" >
        <el-collapse-item title="组件样式" name="style">
            <el-form label-width="auto">
                <el-form-item label="选项卡">
                    <el-switch v-model="tabs" />
                </el-form-item>
                <el-form-item label="组件底色">
                    <el-color-picker v-model="backgroundColor" show-alpha :predefine="predefineColors" />
                </el-form-item>
            </el-form>
        </el-collapse-item>
    </el-collapse>
</template>
<script setup lang="ts">
import {ref,computed} from 'vue'
import {select,data} from '@drag/store'
import {find} from '@drag/utils'
const activeNames = ref(['data'])
const tabs = computed({
    get(){
        if(typeof select.value === 'number'||typeof select.value=== 'string'){
            let component = find({nodeId:select.value,tree:data.value,meNode:true})
            return component?.tabs
        }
    },
    set: (val) => {
        if(typeof select.value === 'number'||typeof select.value=== 'string'){
            let component = find({nodeId:select.value,tree:data.value,meNode:true})
            if(component)component.tabs = val
        }
    }
})
const backgroundColor = computed({
    get(){
        if(typeof select.value === 'number'||typeof select.value=== 'string'){
            let component = find({nodeId:select.value,tree:data.value,meNode:true})
            return component?.style?.backgroundColor
        }
    },
    set: (val) => {
        if(typeof select.value === 'number'||typeof select.value=== 'string'){
            let component = find({nodeId:select.value,tree:data.value,meNode:true})
            if(component){
                if(!component.style)component.style = {}
                component.style.backgroundColor = val
            }
        }
    }
})
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
</script>
<style scoped>
:deep(.el-collapse-item__content){
    padding: 10px;
}
:deep(.el-collapse-item__header){
    padding-left: 10px;
}
</style>